<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery插件开发</title>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
//1. 类级别的插件开发，直接给jQuery的类添加类方法，可以理解为添加静态方法
//1.1添加一个新的全局函数
jQuery.foo = function(){
	alert("This is a test. This is only a test");
};
//1.2 使用jQuery.extend(object)
jQuery.extend({
	foo:function(){
		alert("This is a test");//在此出命名冲突，覆盖了之前定义的方法
	},
	bar:function(param){//带有参数的函数定义
		alert("This is another test with param:"+param+".");
	}
});
//1.3 使用命名空间，避免函数名同jQuery或者jQuery的其他插件产生冲突
//语法总结：  jQuery.自定义类名 = {类的定义}
jQuery.myPlugins = {
	attr:"aaa",
	foo:function(){
		alert("This is");
	},
	bar:function(Param){
		alert(Param);
	}
};

//2.对象级别的插件开发
//2.1 形式1，通过extend方法定义新类
(function($){
	$.fn.extend({
		pluginName:function(opt, callback){
			alert(opt);
			callback();
		}
	});
})(jQuery);

//2.2 形式2，通过向fn增加属性的方式增加方法
(function($){
	$.fn.plugin2 = function(){
		alert("形式2的方式定义一个插件");
	}
})(jQuery);//此括号的作用是调用之前定义的匿名函数，并且传递jQuery对象进去，这样做的好处是可以在函数中使用$而不会出现冲突



/**
 * 测试插件函数的使用
 */
$(document).ready(function(){
	//使用增加的全局函数
	//$.foo();
	//$.bar("aaaa");
	
	//调用使用命名空间的函数
	//$.myPlugins.foo();
	//$.myPlugins.bar("123");
	//alert($.myPlugins.attr);
	
	//调用对象的扩展插件
	$("body").pluginName("a",function(){alert('b')});
	$("body").plugin2();
});
</script>
</head>
<body>

</body>
</html>